<template>
  <a-modal v-model:visible="showModal" title="温馨提示" @cancel="handleOk">
    <div>
      您当前没有打开网页打印插件，请先打开或者
      <div
          class="text-blue"
          style="display: inline-block; cursor: pointer"
          @click="downloadExe"
      >
        点击下载
        <cloud-download-outlined style="font-size: 20px"/>
      </div>
      。电脑需要同时安装微软word软件或者wps软件，才能使用。
    </div>
    <template #footer>
      <div style="text-align: right">
        <a-button type="primary" @click="handleOk">好的</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script>
import {watch, reactive, toRefs} from "vue";
import {CloudDownloadOutlined} from '@ant-design/icons-vue'
import axios from 'axios'
import {message} from 'ant-design-vue'

export default {
  components: {CloudDownloadOutlined},
  props: {
    usePrint: {
      type: Boolean,
      default: false
    },
    file_list: {
      type: Array,
      default: () => ([])
    }
  },
  setup(props, context) {

    const state = reactive({
      showModal: false
    })

    //连接
    const commitPrint = () => {
      // 发送数据
      const param = {
        file_list: props.file_list,
      };
      console.log(JSON.stringify(param));
      axios
          .post("http://127.0.0.1:19889/api/printDoc", param, {timeout: 2000})
          .then((response) => {
            message.success("发送成功");
            context.emit("change")
          })
          .catch((error) => {
            message.error(error);
          });
    };

    //连接
    const connect = () => {
      axios
          .get("http://127.0.0.1:19889/api/connect", {timeout: 1000})
          .then((response) => {
            console.log(response.data);
            commitPrint();
          })
          .catch((error) => {
            console.error(error);
            state.showModal = true;
          });
    };

    // 下载文件
    const downloadExe = () => {
      const url =
          "https://bailing-customer-1305744786.cos.ap-nanjing.myqcloud.com/http_printer/%E7%BD%91%E9%A1%B5%E6%89%93%E5%8D%B0%E6%8F%92%E4%BB%B6.exe";
      window.open(url);
    };


    const handleOk = () => {
      state.showModal = false;
      context.emit("change")
    }


    watch(() => props.usePrint, (value) => {
      if (value) {
        connect()
      }
    })


    return {
      ...toRefs(state),
      downloadExe,
      connect,
      commitPrint,
      handleOk
    }
  }
}
</script>

<style lang="less" scoped>

</style>